<template>
  <div>
    <h1>现在的数量：{{$store.state.num}}</h1>
    <h1>getters的数量:{{$store.getters.newNum}}</h1>
    <button @click="addNum">数量++</button>
    <button @click="subNum">数量--</button>
    <button @click="OddaddNum">奇数++</button>
    <button @click="addNumAsync">一秒后++</button>
    <!-- 用简写  加()传参 用数组或者对象传多个参-->
    <button @click="addCount(count)">state中的num累加data中的count</button>
    <!-- <button @click="addCount([count,1,2,3])">state中的num累加data中的count</button> -->
    
  </div>
</template>

<script>
import { mapState,mapGetters,mapActions,mapMutations } from 'vuex';
export default {
  name: 'App',
  data(){
    return {
      count:6,
    }
  },

  // 对于mapState而言 可以把vuex当中State数据映射给组件进行使用
  // 对于mapGetters而言 可以把vuex当中getters数据映射给组件进行使用
  // 对于mapActions而言 可以把vuex当中actions的方法映射给组件进行使用
  // 对于mapMutations而言 可以把vuex当中mutations的方法映射给组件进行使用

  // 对于映射数据而言 需要写在computed中
  // 对于映射方法而言 需要写在methods当中

  // 使用映射时 咱们传递了一个数组 有条件
  // 1.不可以使用vuex当中的模块化(第五个核心概念 现在不讲 之后项目讲)
  // 2.组件当中使用的名字必须和vuex中某个核心的名字是一样的

  // 如果组件中用到的名字和vuex中某个核心的名字不一样 咋办?
  // 就不能传递数组了 得传递一个对象

  methods:{
    //用数组 同名 不用模块
    ...mapActions(['subNum','OddaddNum','addNumAsync','addCount']),
    // 用对象 不同名
    ...mapActions({
      // 属性：组件使用的名字
      // 值：vuex中某个核心使用的名字（字符串）
      addNum:'addNum1'
    }),


    // ...mapMutations([])


    // addNum(){
    //   this.$store.dispatch('addNum')
    // },
    // subNum(){
    //   this.$store.dispatch('subNum')
    // },
    // OddaddNum(){
    //   this.$store.dispatch('OddaddNum')
    // },
    // addNumAsync(){
    //   this.$store.dispatch('addNumAsync')
    // },
    // addCount(){ 
    //   this.$store.dispatch('addCount',this.count)
    // },


  },
  computed:{
    ...mapState(['num']),
    ...mapGetters(['newNum'])
  }
}
</script>

<style scoped>

</style>
